﻿<div id="toolBar">
    <div id="leftItemsArea">

        <div class="iconButton" id="newModelItem" title="New model">
            <img src="../../Content/Images/Icons/toolbar/new-document.png" />
        </div>
        <div class="iconButton" id="openModelItem" title="Open existing model">
            <img src="../../Content/Images/Icons/toolbar/open.png" />
        </div>
        <div  class="iconButton" id="saveModelItem" title="Save changes">
            <img src="../../Content/Images/Icons/toolbar/save.png" />
        </div>
        <input id="modelNameTextbox" type="text" class="Textbox" title="Name of the current Feature Model" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
    </div>
    <div id="centerItemsArea">
        <div class="iconButton" id="newFeatureItem" title="Add a new Feature">
            <img src="../../Content/Images/Icons/toolbar/feature.png" />
        </div>
        <div class="iconButton" id="newRelationItem" title="Add a new Relation">
            <img src="../../Content/Images/Icons/toolbar/relation.png" />
        </div>
        <div class="iconButton" id="newGroupRelationItem" title="Add a new Group relation">
            <img src="../../Content/Images/Icons/toolbar/grouprelation.png" />
        </div>
        <div class="iconButton" id="newCompositionRuleItem" title="Add a new Composition rule">
            <img src="../../Content/Images/Icons/toolbar/compositionrule.png" />
        </div>
        <div class="iconButton" id="newCustomRuleItem" title="Add a new Custom rule">
            <img src="../../Content/Images/Icons/toolbar/customrule.png" />
        </div>
        <div class="iconButton" id="newCustomFunctionItem" title="Add a new Custom function">
            <img src="../../Content/Images/Icons/toolbar/customfunction.png" />
        </div>
    </div>
    <div id="rightItemsArea">
        <div class="iconButton" id="toggleOrientationItem" title="Toggle orientation of diagram">
            <img src="../../Content/Images/Icons/toolbar/toggle-orientation.png" />
        </div>
        <div class="iconButton" id="zoomInItem" title="Zoom in">
            <img src="../../Content/Images/Icons/toolbar/zoom-in.png" />
        </div>
        <div class="iconButton" id="zoomOutItem" title="Zoom out">
            <img src="../../Content/Images/Icons/toolbar/zoom-out.png" />
        </div>
    </div>
</div>
